<!doctype html>
<html>
<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="../images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon.png">
	<title>section</title>
	<link rel="stylesheet" href="../../dist/seedsui.min.css">
	<style type="text/css">
	.button{
		margin:8px;
	}
	</style>
</head>

<body ontouchstart="">
	<div class="pages">
		<section id="ID-Page0" class="active">
			<header>
			  <div class="titlebar">
			    <a class="titlebar-button" href="javascript:history.go(-1)">
		            <i class="icon icon-arrowleft"></i>
		        </a>
			    <h1 class="titlebar-title">单页模式</h1>
			  </div>
			</header>
			<article>
				<a class="button block bg-1" href="#ID-Page1">slideLeft</a>
			    <a class="button block bg-2" href="#ID-Page2">slideRight</a>
			    <a class="button block bg-3" href="#ID-Page3">slideUp</a>
			    <a class="button block bg-4" href="#ID-Page4">slideDown</a>
			    <a class="button block bg-5" href="#ID-Page5">fade</a>
			    <a class="button block bg-6" href="#ID-Page6">zoom</a>
			    <a class="button block bg-7" href="#ID-Page7">none</a>
			    <div class="card" style="padding:8px;">
			    	适用于简单的单页处理，如需要大量使用单页模式，还请使用History手动配置，最好配合backbone等含router的框架使用。
			    </div>
			</article>
		</section>
		<!--page1-->
		<section id="ID-Page1-Section" data-animation="slideLeft">
			<header>
			  <div class="titlebar">
			    <a class="titlebar-button" href="javascript:back()">
		            <i class="icon icon-arrowleft"></i>
		        </a>
			    <h1 class="titlebar-title">二级页面</h1>
			  </div>
			</header>
			<article>
				<a class="button block" href="#ID-Page1Lvl3">进入三级页面</a>
				<a class="button block SID-BtnSelf" data-self-href="#ID-Page1Lvl3" target="_self">_self打开</a>
			</article>
		</section>
		<section id="ID-Page1Lvl3-Section" data-animation="slideLeft">
			<header>
			  <div class="titlebar">
			    <a class="titlebar-button" href="javascript:back()">
		            <i class="icon icon-arrowleft"></i>
		        </a>
			    <h1 class="titlebar-title">三级页面</h1>
			  </div>
			</header>
			<article>
				<a class="button block" href="#ID-Page1Lvl4">进入四级页面</a>
			</article>
		</section>
		<section id="ID-Page1Lvl4-Section" data-animation="slideLeft">
			<header>
			  <div class="titlebar">
			    <a class="titlebar-button" href="javascript:back()">
		            <i class="icon icon-arrowleft"></i>
		        </a>
			    <h1 class="titlebar-title">四级页面</h1>
			  </div>
			</header>
			<article>
				<a class="button block" href="#ID-Page1Lvl5">进入五级页面</a>
			</article>
		</section>
		<section id="ID-Page1Lvl5-Section" data-animation="slideLeft">
			<header>
			  <div class="titlebar">
			    <a class="titlebar-button" href="javascript:back()">
		            <i class="icon icon-arrowleft"></i>
		        </a>
			    <h1 class="titlebar-title">五级页面</h1>
			  </div>
			</header>
			<article>
				<a class="button block" href="javascript:history.go(-1)">history.go(-1)</a>
				<a class="button block" href="javascript:history.go(-2)">history.go(-2)</a>
				<a class="button block" href="javascript:history.go(-3)">history.go(-3)</a>
			</article>
		</section>
		<!--page2-->
		<section id="ID-Page2-Section" data-animation="slideRight">
			<header>
			  <div class="titlebar">
			    <a class="titlebar-button" href="javascript:back()">
		            <i class="icon icon-arrowleft"></i>
		        </a>
			    <h1 class="titlebar-title">slideRight</h1>
			  </div>
			</header>
			<article>
				<div style="padding: 100px 0;text-align: center;">slideRight页面</div>
				<div class="bg-2" style="color: white;text-align: center;height: 800px;">——滚动条——</div>
			</article>
		</section>
		<!--page3-->
		<section id="ID-Page3-Section" data-animation="slideUp">
			<header>
			  <div class="titlebar">
			    <a class="titlebar-button" href="javascript:back()">
		            <i class="icon icon-arrowleft"></i>
		        </a>
			    <h1 class="titlebar-title">slideUp</h1>
			  </div>
			</header>
			<article>
				<div style="padding: 100px 0;text-align: center;">slideUp页面</div>
				<div class="bg-3" style="color: white;text-align: center;height: 800px;">——滚动条——</div>
			</article>
		</section>
		<!--page4-->
		<section id="ID-Page4-Section" data-animation="slideDown">
			<header>
			  <div class="titlebar">
			    <a class="titlebar-button" href="javascript:back()">
		            <i class="icon icon-arrowleft"></i>
		        </a>
			    <h1 class="titlebar-title">slideDown</h1>
			  </div>
			</header>
			<article>
				<div style="padding: 100px 0;text-align: center;">slideDown页面</div>
				<div class="bg-4" style="color: white;text-align: center;height: 800px;">——滚动条——</div>
			</article>
		</section>
		<!--page5-->
		<section id="ID-Page5-Section" data-animation="fade">
			<header>
			  <div class="titlebar">
			    <a class="titlebar-button" href="javascript:back()">
		            <i class="icon icon-arrowleft"></i>
		        </a>
			    <h1 class="titlebar-title">fade</h1>
			  </div>
			</header>
			<article>
				<div style="padding: 100px 0;text-align: center;">fade页面</div>
				<div class="bg-5" style="color: white;text-align: center;height: 800px;">——滚动条——</div>
			</article>
		</section>
		<!--page6-->
		<section id="ID-Page6-Section" data-animation="zoom">
			<header>
			  <div class="titlebar">
			    <a class="titlebar-button" href="javascript:back()">
		            <i class="icon icon-arrowleft"></i>
		        </a>
			    <h1 class="titlebar-title">zoom</h1>
			  </div>
			</header>
			<article>
				<div style="padding: 100px 0;text-align: center;">zoom页面</div>
				<div class="bg-6" style="color: white;text-align: center;height: 800px;">——滚动条——</div>
			</article>
		</section>
		<!--page7-->
		<section id="ID-Page7-Section" data-animation="none">
			<header>
			  <div class="titlebar">
			    <a class="titlebar-button" href="javascript:back()">
		            <i class="icon icon-arrowleft"></i>
		        </a>
			    <h1 class="titlebar-title">none</h1>
			  </div>
			</header>
			<article>
				<div style="padding: 100px 0;text-align: center;">none页面</div>
				<div class="bg-7" style="color: white;text-align: center;height: 800px;">——滚动条——</div>
			</article>
		</section>
	</div>
    <script src="../../dist/seedsui.min.js"></script>
	<script>
		var view={
			/*=========================
              Model
              ===========================*/
            render:function(){
            	var self=this;
            	/*历史记录控制*/
                this.history=new History({
                	onInit:function(e){
                		e.clearList();
                		//如果有hash值，保存
                		var currentHash=location.hash;
        				if(currentHash){
        					e.add(currentHash);
        					currentHash=currentHash.indexOf("/")>=0?currentHash.substring(0,currentHash.indexOf("/")):currentHash;
        					document.querySelector(currentHash+"-Section").classList.add("active");
        				}
                		console.log(e.list);
                	},
                	onBack:function(e){
		                if(e.discardList){
		                    for(var i=0,discardLi;discardLi=e.discardList[i++];){
		                        var hash=discardLi.indexOf("/")>=0?discardLi.substring(0,discardLi.indexOf("/")):discardLi;
		                        document.querySelector(hash+"-Section").classList.remove("active");
		                    }
		                }
		                //console.log("后退："+e.prevHash);
		                //app.isBack=true;
		                if(e.prevHash){
		                    var prevHash=e.prevHash.indexOf("/")>=0?e.prevHash.substring(0,e.prevHash.indexOf("/")):e.prevHash;
		                    document.querySelector(prevHash+"-Section").classList.remove("active");
		                }
		                console.log(e.list);
		            },
		            onForward:function(e){
		                //console.log("前进："+e.currentHash);
		                //app.isBack=false;
		                var currentHash=e.currentHash.indexOf("/")>=0?e.currentHash.substring(0,e.currentHash.indexOf("/")):e.currentHash;
		                document.querySelector(currentHash+"-Section").classList.add("active");
		                console.log(e.list);
		            }
                });

                //初始化时，历史记录就有了，说明刷新过了
                /*if(this.history.list.length>0){
                	for(var i=0,hashLi;hashLi=this.history.list[i++];){
                		var hash=hashLi.indexOf("/")>=0?hashLi.substring(0,hashLi.indexOf("/")):hashLi;
                		document.querySelector(hash+"-Section").classList.add("active");
                	}
                }*/

                /*页面控制*/
                /*this.sections=new Sections({
                	onStart:function(e){
                		//console.log("开始显示："+e.container.id);
                	},
                	onShowed:function(e){
                		//console.log("显示完成："+e.container.id);
                	},
                	onHid:function(e){
                		//console.log("隐藏完成："+e.container.id);
                	}
                });*/

            	/*加载数据*/
                this.loadData();
            },
            loadData:function(){
                this._attach();//使用backbone时，此行无用
            },
            /*=========================
              Method
              ===========================*/
            _targetSelf:function(href){
            	var self=this;
            	var hash=href.indexOf("/")>=0?href.substring(0,href.indexOf("/")):href;
            	this.history.replace(hash);
            	document.querySelector(hash+"-Section").classList.add("active");
        		setTimeout(function(){
        			document.querySelector(self.history.prevHash+"-Section").classList.remove("active");
        		},500);
            },
            /*=========================
              Events
              ===========================*/
            _attach:function(e){
                var self=this;
                document.querySelector(".SID-BtnSelf").addEventListener("click",function(e){
                	self._onClickBtnSelf(e);
                },false);
            },
            /*=========================
              Event Handler
              ===========================*/
            _onClickBtnSelf:function(e){
            	var href=e.currentTarget.getAttribute("data-self-href");
            	this._targetSelf(href);
            },
        }

        window.addEventListener("load",function(){
            view.render();
        }, false);

        //定义exmobi返回
        function back(){history.go(-1);}
	</script>
</body>
</html>